<template>
  <div>
    <h1>订单详情</h1>
    <div class="order-detailBox">
      <div class="order-details">
        <span>订单编号：</span>
        <strong>{{order._id}}</strong>
      </div>
      <div class="order-details details">
        <span>产品详情</span>
        <div class="order-product clearfix">
          <div class="left fl">
            <img
              width="150"
              v-if="order.productsId.imgURL"
              :src="'http://localhost:3000/images/'+order.productsId.imgURL"
              alt
            />
            <img width="60" v-else src="http://localhost:3000/default/default.jpg" alt />
          </div>
          <div class="right fl">
            <p>
              <span>产品名称：</span>
              <span>{{order.productsId.name}}</span>
            </p>
            <p>
              <span>详情介绍：</span>
              <span>{{order.productsId.information}}</span>
            </p>
            <p>
              <span>产品价格：</span>
              <span>{{order.productsId.price}}元/{{order.productsId.year}}年</span>
            </p>
            <p></p>
          </div>
        </div>
      </div>
      <div class="order-details">
        <span>购买者：</span>
        <strong>{{order.usersId.userName}}</strong>
      </div>
      <div class="order-details">
        <span>销售者：</span>
        <strong>{{order.salesmanId.userName}}</strong>
      </div>
      <div class="order-details">
        <span>订单状态：</span>
        <el-button type="warning">{{state}}</el-button>
      </div>
    </div>
    <el-button plain @click="backList" class="backBtn">返回列表</el-button>
  </div>
</template>

<script>
import axios from "axios";
import api from "../../../network/apis/api";
export default {
  data() {
    return {
      order: {
        productsId: {},
        salesmanId: {},
        state: 0,
        time: "",
        usersId: {},
        _id: "",
      },
      state: "",
    };
  },
  created() {
    this.getOrderDetailsById();
  },
  methods: {
    async getOrderDetailsById() {
      let _id = this.$route.params._id;
      const { data } = await api.orders.getOneOrderInfo({ _id });
      if (data.status) {
        this.order = data.data;
        this.setState(data.data.state);
      }
    },
    //设置订单状态
    setState(val) {
      switch (parseInt(val)) {
        case 0:
          this.state = "待支付";
          break;
        case 1:
          this.state = "已支付";
          break;
        case 2:
          this.state = "生效";
          break;
        case 3:
          this.state = "已失效";
          break;
        case 4:
          this.state = "理赔中";
          break;
        case 5:
          this.state = "理赔成功";
          break;
        case 6:
          this.state = "退款中";
          break;
        case 7:
          this.state = "退款成功";
          break;
      }
    },

    //返回订单列表
    backList() {
      this.$router.push("/admin/orderList");
    },
  },
};
</script>

<style scoped >
.order-detailBox > div {
  margin-top: 16px;
}
.order-detailBox .order-product {
  margin-top: 10px;
}
.order-detailBox .order-product .right {
  margin-left: 40px;
  line-height: 40px;
}
.backBtn {
  margin-top: 22px;
}
</style>